<template>
  <div v-if="visible" class="modal-overlay" @click="closeModal">
    <div class="modal-content" @click.stop>
      <!-- 头部 -->
      <div class="modal-header">
        <div class="header-title">
          <dv-decoration3 class="decoration-left" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
          <dv-border-box-2 class="title-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
            <div class="title">青枣园农事检测记录详情</div>
          </dv-border-box-2>
          <dv-decoration3 class="decoration-right" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
        </div>
        <button class="close-btn" @click="closeModal">
          <i class="icon-close">×</i>
        </button>
      </div>

      <!-- 内容区域 -->
      <div class="modal-body">
        <!-- 操作工具栏 -->
        <div class="toolbar">
          <div class="toolbar-left">
            <button class="btn btn-primary" @click="handleAdd">
              <i class="icon-add">+</i> 新增记录
            </button>
            <button class="btn btn-export" @click="handleExport">
              <i class="icon-export">⤓</i> 导出数据
            </button>
          </div>
          <div class="toolbar-right">
            <div class="search-box">
              <input v-model="searchText" type="text" placeholder="搜索记录..." class="search-input" />
              <i class="icon-search">🔍</i>
            </div>
            <button class="btn btn-refresh" @click="refreshData">
              <i class="icon-refresh">↻</i> 刷新
            </button>
          </div>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th v-for="header in tableHeaders" :key="header.key" :style="{ width: header.width }">
                  {{ header.label }}
                </th>
                <th width="120">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in filteredData" :key="item.id"
                :class="{ 'even-row': index % 2 === 0, 'odd-row': index % 2 !== 0 }">
                <td>{{ item.sensorType }}</td>
                <td>{{ item.value }}</td>
                <td>{{ item.unit }}</td>
                <td>{{ item.location || '青枣园A区' }}</td>
                <td>{{ formatTime(item.timestamp) }}</td>
                <td>
                  <span class="status" :class="getStatusClass(item.status)">
                    {{ getStatusText(item.status) }}
                  </span>
                </td>
                <td class="actions">
                  <button class="btn-icon btn-edit" @click="handleEdit(item)" title="编辑">
                    <i class="icon-edit">✎</i>
                  </button>
                  <button class="btn-icon btn-delete" @click="handleDelete(item)" title="删除">
                    <i class="icon-delete">🗑</i>
                  </button>
                  <button class="btn-icon btn-view" @click="handleView(item)" title="查看详情">
                    <i class="icon-view">👁</i>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>

          <!-- 空数据提示 -->
          <div v-if="filteredData.length === 0" class="empty-state">
            <div class="empty-icon">📊</div>
            <div class="empty-text">暂无数据</div>
            <button class="btn btn-primary" @click="handleAdd">添加第一条记录</button>
          </div>
        </div>

        <!-- 分页 -->
        <div class="pagination">
          <div class="pagination-info">
            共 {{ filteredData.length }} 条记录
          </div>
        </div>
      </div>
    </div>

    <!-- 新增/编辑表单弹窗 -->
    <div v-if="showFormModal" class="form-modal-overlay" @click="closeFormModal">
      <div class="form-modal-content" @click.stop>
        <div class="form-header">
          <h3>{{ formType === 'add' ? '新增农事记录' : '编辑农事记录' }}</h3>
          <button class="close-btn" @click="closeFormModal">×</button>
        </div>
        <div class="form-body">
          <form @submit.prevent="submitForm">
            <div class="form-group">
              <label>数据种类</label>
              <select v-model="formData.sensorType" required>
                <option value="">请选择</option>
                <option value="温度">温度</option>
                <option value="湿度">湿度</option>
                <option value="土壤湿度">土壤湿度</option>
                <option value="光照强度">光照强度</option>
                <option value="CO2浓度">CO2浓度</option>
                <option value="PH值">PH值</option>
              </select>
            </div>
            <div class="form-group">
              <label>数值</label>
              <input v-model="formData.value" type="number" step="0.01" required />
            </div>
            <div class="form-group">
              <label>单位</label>
              <input v-model="formData.unit" required />
            </div>
            <div class="form-group">
              <label>位置</label>
              <input v-model="formData.location" placeholder="例如：青枣园A区" />
            </div>
            <div class="form-group">
              <label>状态</label>
              <select v-model="formData.status">
                <option value="normal">正常</option>
                <option value="warning">警告</option>
                <option value="error">异常</option>
              </select>
            </div>
            <div class="form-actions">
              <button type="button" class="btn btn-cancel" @click="closeFormModal">取消</button>
              <button type="submit" class="btn btn-submit">保存</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <div v-if="showDetailModal" class="detail-modal-overlay" @click="closeDetailModal">
      <div class="detail-modal-content" @click.stop>
        <div class="detail-header">
          <h3>记录详情</h3>
          <button class="close-btn" @click="closeDetailModal">×</button>
        </div>
        <div class="detail-body">
          <div class="detail-grid">
            <div class="detail-item">
              <label>数据种类:</label>
              <span>{{ currentItem.sensorType }}</span>
            </div>
            <div class="detail-item">
              <label>数值:</label>
              <span>{{ currentItem.value }}</span>
            </div>
            <div class="detail-item">
              <label>单位:</label>
              <span>{{ currentItem.unit }}</span>
            </div>
            <div class="detail-item">
              <label>位置:</label>
              <span>{{ currentItem.location || '青枣园A区' }}</span>
            </div>
            <div class="detail-item">
              <label>记录时间:</label>
              <span>{{ formatTime(currentItem.timestamp) }}</span>
            </div>
            <div class="detail-item">
              <label>状态:</label>
              <span :class="getStatusClass(currentItem.status)">
                {{ getStatusText(currentItem.status) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'

const props = defineProps({
  visible: Boolean,
  data: Array
})

const emit = defineEmits(['update:visible', 'refresh'])

// 响应式数据
const searchText = ref('')
const showFormModal = ref(false)
const showDetailModal = ref(false)
const formType = ref('add') // 'add' or 'edit'
const currentItem = ref({})

// 表单数据
const formData = reactive({
  sensorType: '',
  value: '',
  unit: '',
  location: '',
  status: 'normal'
})

// 表格列配置
const tableHeaders = [
  { key: 'sensorType', label: '数据种类', width: '120px' },
  { key: 'value', label: '数值', width: '100px' },
  { key: 'unit', label: '单位', width: '80px' },
  { key: 'location', label: '位置', width: '120px' },
  { key: 'timestamp', label: '记录时间', width: '150px' },
  { key: 'status', label: '状态', width: '80px' }
]

// 过滤数据
const filteredData = computed(() => {
  if (!searchText.value) return props.data || []
  return props.data.filter(item =>
    item.sensorType?.includes(searchText.value) ||
    item.location?.includes(searchText.value)
  )
})

// 方法
const closeModal = () => {
  emit('update:visible', false)
}

const refreshData = () => {
  emit('refresh')
}

const handleAdd = () => {
  formType.value = 'add'
  Object.assign(formData, {
    sensorType: '',
    value: '',
    unit: '',
    location: '',
    status: 'normal'
  })
  showFormModal.value = true
}

const handleEdit = (item) => {
  formType.value = 'edit'
  Object.assign(formData, { ...item })
  currentItem.value = item
  showFormModal.value = true
}

const handleDelete = (item) => {
  if (confirm(`确定要删除 "${item.sensorType}" 记录吗？`)) {
    // 这里调用删除API
    console.log('删除记录:', item)
    refreshData()
  }
}

const handleView = (item) => {
  currentItem.value = item
  showDetailModal.value = true
}

const handleExport = () => {
  // 导出数据逻辑
  console.log('导出数据')
}

const closeFormModal = () => {
  showFormModal.value = false
}

const closeDetailModal = () => {
  showDetailModal.value = false
}

const submitForm = () => {
  // 这里调用保存API
  console.log('保存表单:', formData)
  showFormModal.value = false
  refreshData()
}

const formatTime = (timestamp) => {
  if (!timestamp) return '-'
  return new Date(timestamp).toLocaleString('zh-CN')
}

const getStatusClass = (status) => {
  return {
    'status-normal': status === 'normal',
    'status-warning': status === 'warning',
    'status-error': status === 'error'
  }
}

const getStatusText = (status) => {
  const statusMap = {
    normal: '正常',
    warning: '警告',
    error: '异常'
  }
  return statusMap[status] || '未知'
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.modal-content {
  width: 95%;
  height: 90%;
  background: rgba(0, 28, 36, 0.95);
  border: 1px solid rgba(0, 255, 217, 0.3);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 50px rgba(0, 255, 217, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 255, 217, 0.3);
}

.header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-box {
  width: fit-content;
  height: 40px;
  padding: 0 30px;
}

.title {
  color: #00ffd9;
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 10px;
  line-height: 40px;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}

.decoration-left,
.decoration-right {
  width: 90px;
  height: 20px;
}

.close-btn {
  background: none;
  border: none;
  color: #00ffd9;
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
  border-radius: 3px;
  transition: all 0.3s;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.modal-body {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  padding: 8px 16px;
  border: 1px solid rgba(0, 255, 217, 0.3);
  border-radius: 4px;
  background: rgba(0, 28, 36, 0.8);
  color: #00ffd9;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn:hover {
  background: rgba(0, 255, 217, 0.1);
  box-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}

.btn-primary {
  background: rgba(0, 255, 217, 0.2);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  padding: 8px 35px 8px 12px;
  border: 1px solid rgba(0, 255, 217, 0.3);
  border-radius: 4px;
  background: rgba(0, 28, 36, 0.8);
  color: #00ffd9;
  width: 200px;
}

.search-input::placeholder {
  color: rgba(0, 255, 217, 0.5);
}

.icon-search {
  position: absolute;
  right: 10px;
  color: #00ffd9;
}

.table-container {
  flex: 1;
  overflow: auto;
  border: 1px solid rgba(0, 255, 217, 0.3);
  border-radius: 4px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  color: #00ffd9;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 255, 217, 0.2);
}

.data-table th {
  background: rgba(0, 28, 36, 0.8);
  font-weight: bold;
  position: sticky;
  top: 0;
}

.even-row {
  background: rgba(0, 28, 36, 0.4);
}

.odd-row {
  background: rgba(0, 28, 36, 0.3);
}

.data-table tr:hover {
  background: rgba(0, 255, 217, 0.1);
}

.actions {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.btn-icon {
  background: none;
  border: none;
  color: #00ffd9;
  cursor: pointer;
  padding: 5px;
  border-radius: 3px;
  transition: all 0.3s;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-edit:hover {
  color: #ffa500;
}

.btn-delete:hover {
  color: #ff4444;
}

.btn-view:hover {
  color: #00ffd9;
}

.status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.status-normal {
  background: rgba(0, 255, 0, 0.2);
  color: #00ff00;
}

.status-warning {
  background: rgba(255, 165, 0, 0.2);
  color: #ffa500;
}

.status-error {
  background: rgba(255, 0, 0, 0.2);
  color: #ff4444;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #00ffd9;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-text {
  margin-bottom: 20px;
  opacity: 0.8;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  color: #00ffd9;
}

/* 表单弹窗样式 */
.form-modal-overlay,
.detail-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.form-modal-content,
.detail-modal-content {
  background: rgba(0, 28, 36, 0.95);
  border: 1px solid rgba(0, 255, 217, 0.3);
  border-radius: 8px;
  width: 500px;
  max-width: 90vw;
  box-shadow: 0 0 30px rgba(0, 255, 217, 0.2);
}

.form-header,
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 255, 217, 0.3);
}

.form-header h3,
.detail-header h3 {
  color: #00ffd9;
  margin: 0;
}

.form-body,
.detail-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #00ffd9;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(0, 255, 217, 0.3);
  border-radius: 4px;
  background: rgba(0, 28, 36, 0.8);
  color: #00ffd9;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

.btn-cancel {
  background: rgba(255, 255, 255, 0.1);
}

.btn-submit {
  background: rgba(0, 255, 217, 0.2);
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid rgba(0, 255, 217, 0.1);
}

.detail-item label {
  color: rgba(0, 255, 217, 0.8);
}

.detail-item span {
  color: #00ffd9;
}

/* 滚动条样式 */
.table-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.table-container::-webkit-scrollbar-track {
  background: rgba(0, 28, 36, 0.3);
}

.table-container::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 217, 0.3);
  border-radius: 3px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 217, 0.5);
}
</style>